<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>意见反馈</title>
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
		<link rel="stylesheet" href="css/feedback.css" />
		<link rel="stylesheet" href="css/all.css" />
	</head>
	<style type="text/css">
		.b-3{
			background: #333333;
		}
		
		.personal-file{
			position: absolute;
		    width: 100%;
		    height: 100%;
		    top: .15rem;
		    opacity: 0;
		}
		    
	</style>
	<body>
		<div>
			<div class="head">
				<span href="javascript:;" onclick="go()">
        			<i class="iconfont icon-iconfontjiantou1"></i>
				</span>
				<h1 class="titles">意见反馈</h1>
			</div>
			<div class="middle">
				<div class="messages">
					<p class="message">（必选）你想反馈的问题类型</p>
				</div>
				<div class="name">
					<span class="names"></span>
					<span class="name-one">功能异常</span>
				</div>
				<div class="name">
					<span class="names"></span>
					<span class="name-one">产品建议</span>
				</div>
				<div class="name">
					<span class="names"></span>
					<span class="name-one">其他问题</span>
				</div>
				<div class="messages">
					<p class="message">请补充详细问题和意见</p>
				</div>
				<div>
					<textarea class="describe" placeholder="请输入不少于10个字的描述"></textarea>
				</div>
				<div>
					<div class="jiahao p-r">
						<img class="jiahaos" src="img/jiahao.png" alt="" id="personal-profile">
						<input type="file" accept="image/jpg,image/jpeg,image/png" name="file"   onChange="selectImg(this,'personal-profile')" class="personal-file">
					</div>
				</div>
			</div>
			<div class="refers"><input type="buttom" value="提交" class="refer"></div>
		</div>
		<script src="js/jquery.js"></script>
		<script src="js/x_rem.js"></script>
		<script src="js/all.js"></script>
		<script>
			//pictureUrl
			var pictureUrl="";  //图片地址，默认为空
			
			var type = "";    //问题类型
			
			$(".middle").on("click",".name",function(){
				 
				$(".names").removeClass("b-3");  //所有的单选框去掉b-3
				
				$(this).children(".names").addClass("b-3"); //自己的单选框变黑
				
				
				type=$(this).children(".name-one").text();   //获取问题类型
				 
			});
			
			
			
			 //换头像
			function selectImg(file,id) {
					 if (!file.files || !file.files[0]){
			            return;
			        }
		 
			        var reader = new FileReader();
			        reader.onload = function (evt) {
			           var replaceSrc = evt.target.result;
			            //更换cropper的图片
			           // $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
						$("#"+id).prop("src",replaceSrc);//显示为图片的形式
		  					
		  				 
		  				 $.ajax({
							type:"post",
							url:Url+"/base64/upload",
							xhrFields:{
								withCredentials:true
							},
							data:{
								base64:replaceSrc
							},
							success:((data)=>{
							 
								pictureUrl = data.message;
 								if(!data.success){
 									popup(data.message);

 								}
							}),
							error:((err)=>{
								console.log(err);
							})
						});
		  				 
			        }
			        reader.readAsDataURL(file.files[0]);
			       // base64Images.pust();	
		 
				}
			
			
			
			
			
			
			
			
			
			$(".refer").click(()=>{
				
				if(type==""){
					popup("请选择问题类型");
				}else if($(".describe").val()==""){
					popup("问题内容不能为空");
				}else{
					
					var data={
						"type": type,
						"body": $(".describe").val(),
						"pictureUrl":pictureUrl
					};
					
					var success=(data)=>{
						popup(data.message)
					};
					
					Hajax("post","/proposal/addProposal",data,success);
					
				}
				
				
				
			});
			
			
		</script>
	</body>

</html>